<template>
	<view>
		<u-navbar :is-back="back" back-icon-color="#FFFFFF" :title="title" :border-bottom="false" title-color="#FFFFFF"
			:background="background"></u-navbar>
		<view class="top">
			<view class="user">
				<image :src="getHead(info.head_image)" class="head"></image>
				<view class="title">
					<view class="name">
						{{info.username}}
					</view>
					<view class="number" v-if="false">
						{{info.telphone}}
					</view>
				</view>
				<image class="logo" v-if="info.self_grade_logo" :src="img_pre+info.self_grade_logo"></image>
			</view>
			<image v-if="false" src="../static/ranking.png" @click="toPage('ranking')" class="ranking"></image>
		</view>
		<view class="content">
			<view class="fun">
				<view class="title">
					数据统计
				</view>
				<view class="long"></view>
				<view class="text">
					时间：{{info.starttime}}-{{info.endtime}}
				</view>
				<view class="list" style="background: #E9F1FE;">
					<view class="user">
						<image src="../static/x1.png" mode=""></image>
						<view class="text">
							<view class="name">
								合伙人
							</view>
							<view class="number">
								{{info.partner}}
							</view>
						</view>
					</view>
					<view class="user">
						<image src="../static/x2.png" mode=""></image>
						<view class="text">
							<view class="name">
								当月孵化
							</view>
							<view class="number">
								{{info.same_month_partner}}
							</view>
						</view>
					</view>
				</view>
				<view class="list" style="background: #F8F4E8;">
					<view class="user">
						<image src="../static/x3.png" mode=""></image>
						<view class="text">
							<view class="name">
								团队数
							</view>
							<view class="number">
								{{info.team_count}}
							</view>
						</view>
					</view>
					<view class="user">
						<image src="../static/x4.png" mode=""></image>
						<view class="text">
							<view class="name">
								新增活跃
							</view>
							<view class="number">
								{{info.active_count}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="task">
				<view class="list" v-for="(item,index) in dataList" :key="index">
					<view class="up" v-if="false">
						<image :src='"../static/"+item.img+".png"' class="left"></image>
						<view class="right" v-if="item.type==1" @click="toPage('list?uid='+uid)">
							历史查询
							<image src="../static/z1.png" class="go"></image>
						</view>
						<view class="right" v-else
							@click="toPage('chart?type='+item.url+'&name='+item.name+'&uid='+uid)">
							<image src="../static/z2.png" class="img"></image> 统计
						</view>
					</view>
					<view class="center">
						<view class="name">
							{{item.name}} <image src="../static/x5.png"  v-if="item.type==1" @click="toPage('list?uid='+uid)"></image>
						 <image src="../static/x6.png"  v-else @click="toPage('chart?type='+item.url+'&name='+item.name+'&uid='+uid)"></image>
						</view>
						<view class="number" v-if="index==1">
							{{item.all}}
						</view>
					</view>
					<view class="down">
						<u-row>
							<u-col :span="4">
								<view class="icon">
									<view class="number">
										{{item.month}}
									</view>
									<view class="name" @click="showPop(item,item.text1)">
										{{item.month_name}}
										<image v-if="item.show" src="../static/z3.png" mode=""></image>
									</view>
								</view>
							</u-col>
							<u-col :span="4">
								<view class="icon">
									<view class="number">
										{{item.week}}
									</view>
									<view class="name" @click="showPop(item,item.text2)">
										{{item.week_name}}
										<image v-if="item.show" src="../static/z3.png" mode=""></image>
									</view>
								</view>
							</u-col>
							<u-col :span="4">
								<view class="icon">
									<view class="number">
										{{item.day}}
									</view>
									<view class="name" @click="showPop(item,item.text3)">
										{{item.day_name}}
										<image v-if="item.show" src="../static/z3.png" mode=""></image>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="center" v-model="show" :closeable="true">
			<view class="popup">
				<view class="title">
					{{text}}
				</view>
				<view class="list" v-for="(item,index) in list" :key="index">
					<image :src="img_pre+item.manor_logo" mode=""></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="number">
						{{item.number}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#3476FE'
				},
				title: "数据统计",
				show: false,
				teamDetails: {},
				goBuyGoods: {},
				exchangeKmb: {},
				addOpenDetails: {},
				activeDetails: {},
				appointmentDetails: {},
				info: {},
				list: [],
				back: true,
				text: "",
				dataList: {},
				uid: "",
			}
		},
		onLoad(option) {
			than = this;
			if (option.uid) {
				than.uid = option.uid;
			}
			if (option.back) {
				than.back = parseInt(option.back) == 1 ? false : true;
			}
			than.post("api/teamhead/selfMessage", {
				uid: than.uid
			}, function(data) {
				data.starttime= than.$u.timeFormat(data.starttime, 'yyyy.mm.dd');
				data.endtime= than.$u.timeFormat(data.endtime, 'yyyy.mm.dd');
				than.info = data;
			})
			than.post("api/teamhead/teamDetails", {
				uid: than.uid
			}, function(data) {
				var a = 1;
				data.day = data.team_day_number;
				data.month = data.team_month_number;
				data.all = data.team_person_number;
				data.week = data.team_week_number;
				data.month_name = "当月新增";
				data.week_name = "当周新增";
				data.day_name = "当日新增";
				data.type = 1;
				data.name = "团队数据";
				data.img = "b1";
				than.dataList[a] = data;
				than.$forceUpdate();
			})
			than.post("api/teamhead/activeDetails", {
				uid: than.uid
			}, function(data) {
				var a = 2;
				data.day = data.day_open_number;
				data.month = data.month_open_number;
				data.all = data.all_open_number;
				data.week = data.week_open_number;
				data.month_name = "月活跃度";
				data.week_name = "周活跃度";
				data.day_name = "日活跃度";
				data.url = "activeList";
				data.name = "日活数据";
				data.img = "b2";
				than.dataList[a] = data;
				than.$forceUpdate();
			})
			than.post("api/teamhead/goBuyGoods", {
				uid: than.uid
			}, function(data) {
				var a = 4;
				data.day = data.gobuy_day_goods_number;
				data.month = data.gobuy_month_goods_number
				data.all = data.gobuy_goods_number;
				data.week = data.gobuy_week_goods_number;
				data.month_name = "当月抢拍";
				data.week_name = "当周抢拍";
				data.day_name = "当日抢拍";
				data.url = "goBuyGoodsMonthList";
				data.name = "抢拍情况";
				data.img = "b4";
				data.show = true;
				data.text = "gobuy";
				data.text1 = "gobuy_month_goods_number";
				data.text2 = "gobuy_week_goods_number";
				data.text3 = "gobuy_day_goods_number"
				than.dataList[a] = data;
				than.$forceUpdate();
			})
			than.post("api/teamhead/exchangeKmb", {
				uid: than.uid
			}, function(data) {
				var a = 5;
				data.day = data.gobuy_day_goods_number;
				data.month = data.gobuy_month_goods_number;
				data.all = data.gobuy_goods_number;
				data.week = data.gobuy_week_goods_number;
				data.month_name = "当月兑换";
				data.week_name = "当周兑换";
				data.day_name = "当日兑换";
				data.url = "exchangeKmbList";
				data.name = "蜜贝兑换";
				data.img = "b5";
				than.dataList[a] = data;
				than.$forceUpdate();
			})

			than.post("api/teamhead/appointmentDetails", {
				uid: than.uid
			}, function(data) {
				var a = 3;
				data.day = data.day_open_number;
				data.month = data.month_open_number;
				data.all = data.all_open_number;
				data.week = data.week_open_number;
				data.month_name = "当月预约";
				data.week_name = "当周预约";
				data.day_name = "当日预约";
				data.url = "appointmentList";
				data.name = "预约情况";
				data.img = "b6";
				data.show = true;
				data.text = "yuyue";
				data.text1 = "month_open_number";
				data.text2 = "week_open_number";
				data.text3 = "day_open_number"
				than.dataList[a] = data;
				than.$forceUpdate();
			})
		},
		methods: {
			showPop(data, type) {
				switch (data.text) {
					case 'gobuy':
						than.manorBuygoods(type);
						break;
					case 'yuyue':
						than.manorAppointment(type);
						break;
					default:
						break;
				}
			},
			manorAppointment(type) {
				switch (type) {
					case "month_open_number":
						than.text = "月预约数"
						break;
					case "week_open_number":
						than.text = "周预约数"
						break;
					case "day_open_number":
						than.text = "日预约数"
						break;
					default:
						than.text = ""
						break;
				}
				than.post("api/teamhead/manorAppointment", {
					type: type,
					uid: than.uid
				}, function(data) {
					than.list = data;
					than.show = true;
				})
			},
			manorBuygoods(type) {
				switch (type) {
					case "gobuy_month_goods_number":
						than.text = "月抢拍数"
						break;
					case "gobuy_week_goods_number":
						than.text = "周抢拍数"
						break;
					case "gobuy_day_goods_number":
						than.text = "日抢拍数"
						break;
					default:
						than.text = ""
						break;
				}
				than.post("api/teamhead/manorBuygoods", {
					type: type,
					uid: than.uid
				}, function(data) {
					than.list = data;
					than.show = true;
				})
			},
		}
	}
</script>

<style lang="less">
	.ranking {
		width: 163rpx;
		height: 66rpx;
		position: absolute;
		top: 35rpx;
		right: 0;
	}

	.popup {
		width: 535rpx;
		height: 511rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
			line-height: 100rpx;
		}

		.list {
			padding: 0 50rpx;
			display: flex;
			align-items: center;
			height: 80rpx;

			image {
				width: 49rpx;
				height: 54rpx;
				margin-right: 16rpx;
			}

			.name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.number {
				margin-left: auto;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FEB700;
				text-align: right;
			}
		}
	}

	.top {
		position: relative;
		height: 300rpx;
		background: #3476FE;
		display: flex;
		padding: 0 36rpx;

		.user {
			height: 130rpx;
			display: flex;
			align-items: center;
			width: 100%;

			.head {
				width: 102rpx;
				height: 101rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.logo {
				width: 114rpx;
				height: 112rpx;
				margin-left: auto;
			}

			.title {
				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}
				}

				.number {
					font-size: 30rpx;
					font-family: DINCond-Black;
					font-weight: bold;
					color: #333333;
				}


			}
		}


	}

	.content {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		margin-top: -80rpx;
		position: relative;
		z-index: 1;
		padding: 0 39rpx 48rpx;

		.task {
			padding-top: 700rpx;
			border-radius: 20rpx;

			.list {
				background: #FAFAFA;
				padding-bottom: 36rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.up {
					padding: 0 24rpx;
					display: flex;
					align-items: center;
					height: 104rpx;
					line-height: 1;

					.left {
						width: 56rpx;
						height: 56rpx;
					}

					.right {
						margin-left: auto;
						display: flex;
						height: 56rpx;
						align-items: center;
						padding: 0 20rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						background: #F6D297;
						box-shadow: 0px 3rpx 20rpx 0px rgba(100, 100, 102, 0.1);
						border-radius: 28rpx;

						.go {
							width: 11rpx;
							height: 20rpx;
							margin-left: 14rpx;
						}

						.img {
							width: 35rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}
				}

				.center {
					padding:36rpx 24rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #444444;
						display: flex;
						align-items: center;
						image{
							margin-left: 20rpx;
							width: 59rpx;
							height: 59rpx;
						}
					}

					.number {
						font-size: 64rpx;
						font-family: DIN Medium;
						font-weight: 400;
						color: #333333;
					}
				}

				.down {
					padding: 0 18rpx;
					margin-top: 20rpx;

					.icon {
						.name {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #999999;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 9rpx;
							}
						}

						.number {
							font-size: 50rpx;
							font-family: DIN Medium;
							font-weight: bold;
							color: #333333;
						}
					}
				}
			}
		}

		.fun {
			position: absolute;
			top: -30rpx;
			left: 0;
			right: 0;
			width: 678rpx;
			height: 356rpx;
			background: #FFF5F4;
			border-radius: 10rpx;
			margin: auto;

			.title {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				height: 70rpx;
				display: flex;
				align-items: center;
				margin-left: 36rpx;
			}

			.long {
				width: 82rpx;
				height: 11rpx;
				background: #3476FE;
				border-radius: 6rpx;
				margin-left: 36rpx;
				margin-bottom: 19rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-left: 36rpx;
			}

			.list {
				width: 630rpx;
				height: 256rpx;
				border-radius: 20rpx;
				margin: 20rpx auto auto;
				display: flex;
				align-items: center;

				.user {
					display: flex;
					align-items: center;
					width: 50%;

					image {
						width: 84rpx;
						height: 84rpx;
						margin-left: 24rpx;
					}

					.text {
						margin-left: 26rpx;

						.name {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000334;
						}

						.number {
							font-size: 60rpx;
							font-family: DIN Medium;
							font-weight: 400;
							color: #EE5045;
						}
					}
				}
			}
		}

	}

</style>
